<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!-- Head -->

<head>
    <meta charset="utf-8" />
    <title>盲盒订单查询</title>

    <div th:replace="/system/resource/base/baseHead.template"></div>
    <link rel="stylesheet" type="text/css"
        th:href="${application.resourceUrl}+'/assets/js/lightbox/css/lightbox.css'" />
    <link rel="stylesheet" type="text/css" href="https://cdn.test.bestpay.net/orange/antd.1.6.5.css" />
    <!-- <link rel="stylesheet" type="text/css" href="./antd.1.6.5.css" /> -->
    <link rel="stylesheet" type="text/css" href="https://cdn.test.bestpay.net/orange/tailwindcss@2.2.19.min.css" />
    <style>
        html {
            font-size: 14px;
        }

        .page-body {
            padding: 30px;
        }

        .ant-card {
            margin-bottom: 20px;
        }

        [v-cloak] {
            visibility: hidden;
        }

        .photoOverlay {
            opacity: 0;
        }

        .photoOverlay:hover {
            opacity: 1;
        }

        .tabelRowHeight {
            height: 100px;
        }

        .table-img {
            height: 10px;
            width: 10px;
            display: block;
            margin: auto;
        }

        .ant-form-item {
            margin-bottom: 8px;
        }

        .orderModalCnt .cell {
            display: flex;
            align-items: center;
            padding: 5px 0;
            font-size: 16px;
        }

        .orderModalCnt .title {
            width: 120px;
            text-align: right;
        }

        .orderModalCnt .cnt {
            color: #585858;
            flex: 1;
        }
        .go-goods-order{
          padding-top: 43px;
          padding-left: 15px;
        }
    </style>
</head>
<!-- /Head -->
<!-- Body -->

<body>
    <!-- 引入头部 -->
    <div th:include="/system/resource/base/baseNav.template"></div>
    <!-- /引入头部 -->
    <!-- Main Container -->
    <div class="main-container container-fluid">
        <!-- Page Container -->
        <div class="page-container">
            <!-- 引入左侧菜单 -->
            <div class="page-sidebar" id="sidebar" th:include="/system/resource/base/baseLeftMenu.template"></div>
            <!-- /引入左侧菜单 -->
            <!-- Page Content -->
            <div class="page-content">
                <!-- Page Breadcrumb -->
                <div class="page-breadcrumbs">
                    <ul class="breadcrumb"></ul>
                </div>
                <!-- /Page Breadcrumb -->
                <!-- Page Body -->
                <div id="app" class="page-body" v-cloak>
                    <div v-if="showTablePage">
                        <a-card title="盲盒订单-查询">
                            <a-form-model id="tableForm" :model="form" v-bind="layout">
                                <a-row :gutter="24">
                                    <a-col :span="10">
                                        <a-form-model-item label="盲盒活动号 :">
                                            <a-input v-model="form.blindBoxId" placeholder="请输入盲盒活动号" />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="12">
                                        <a-form-model-item label="盲盒子订单编号 :">
                                            <a-input v-model="form.subOrderNo" placeholder="请输入盲盒子订单编号" />
                                        </a-form-model-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="24">
                                    <a-col :span="10">
                                        <a-form-model-item label="商品订单编号 :">
                                            <a-input v-model="form.orderNo" placeholder="请输入商品订单编号" />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="12">
                                        <a-form-model-item label="用户手机号 :">
                                            <a-input v-model="form.mobile" placeholder="请输用户手机号" />
                                        </a-form-model-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="24">
                                    <a-col :span="10">
                                        <a-form-model-item label="盲盒子订单状态 :">
                                            <a-select allow-clear v-model='form.subOrderStatus' placeholder="请选择">
                                                <a-select-option
                                                    v-for="(orderStatusInt, orderStatusIntIndex) in subOrderStatusEnum"
                                                    :value="orderStatusInt.value">
                                                    {{ orderStatusInt.label }}
                                                </a-select-option>
                                            </a-select>
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="12">
                                        <a-form-model-item label="渠道 :">
                                            <a-select allow-clear v-model='form.channel' placeholder="请选择">
                                                <a-select-option v-for="(item, index) in channelList" :key="index"
                                                    :value="item.value">
                                                    {{ item.label }}
                                                </a-select-option>
                                            </a-select>
                                        </a-form-model-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="24">
                                    <a-col :span="10">
                                        <a-form-model-item label="支付时间 :">
                                            <a-config-provider :locale="locales.zh_CN">
                                              
                                                <a-range-picker v-model="form.payTimes" />
                                                  <!-- payTimeStart -->
                                            </a-config-provider>
                                        </a-form-model-item>
                                    </a-col>
                                </a-row>
                                <form id="query-form" method="post" style="display: none;">
                                    <input type="text" name="query.blindBoxId" :value="form.blindBoxId">
                                    <input type="text" name="query.subOrderNo" :value="form.subOrderNo">
                                    <input type="text" name="query.orderNo" :value="form.orderNo">
                                    <input type="text" name="query.mobile" :value="form.mobile">
                                    <input type="text" name="query.channel" :value="form.channel">
                                    <input type="text" name="query.subOrderStatus" :value="form.subOrderStatus">
                                    <input type="text" name="query.payTimeStart" id="hiddenForm-startTime" value="">
                                    <input type="text" name="query.payTimeEnd" id="hiddenForm-endTime" value="">
                                </form>

                                <a-row>
                                    <a-col :span="24" :style="{ textAlign: 'center' }">
                                        <a-button type="primary" :loading="queryTableLoading" @click="onQueryTableData">
                                            查询
                                        </a-button>
                                        <a-button :style="{ marginLeft: '8px' }" @click="resetSearchFormInfo">
                                            重置
                                        </a-button>
                                    </a-col>
                                </a-row>
                            </a-form-model>
                        </a-card>
                        <a-card title="查询结果">
                            <a-button @click="onExport" slot="extra" type="primary">
                                导出
                            </a-button>
                            <a-config-provider :locale="locales.zh_CN">

                                <a-table :columns="tableColumns" :data-source="tableData" :loading="loading"
                                    :pagination="pagination" row-key="id" :scroll="tableScroll" bordered
                                    size="small" @change="handleTableChange">
                                    <template slot="goodImg" slot-scope="text, record, index">
                                        <img class="table-img" :src="text">
                                    </template>
                                    <template slot="action" slot-scope="text, record, index">
                                        <a-button type="primary" @click="showDetailDialog(record)">详情</a-button>
                                    </template>
                                </a-table>
                            </a-config-provider>
                        </a-card>
                        <!-- 关闭订单弹层 -->
                        <a-modal v-model="closeOrderModalVisible" title="确认为该笔订单执行关单操作？" ok-text="确认关单"
                            @ok="handleCloseOrderOk">
                            <div class="orderModalCnt">
                                <div class="cell">
                                    <div class="title">订单流水号：</div>
                                    <div class="cnt">{{orderModalInfo.orderNo}}</div>
                                </div>
                                <div class="cell">
                                    <div class="title">支付时间：</div>
                                    <div class="cnt">{{orderModalInfo.payTime}}</div>
                                </div>
                                <div class="cell">
                                    <div class="title">订单状态：</div>
                                    <div class="cnt">{{getOrderStatusName(orderModalInfo.orderStatusInt)}}</div>
                                </div>
                                <div class="cell">
                                    <div class="title">商品名称：</div>
                                    <div class="cnt">{{orderModalInfo.commodityMainTitle}}</div>
                                </div>
                                <div class="cell">
                                    <div class="title">实付金额：</div>
                                    <div class="cnt">{{orderModalInfo.payAmount}}元</div>
                                </div>
                                <div class="cell">
                                    <div class="title">用户手机号：</div>
                                    <div class="cnt">{{orderModalInfo.mobile}}</div>
                                </div>
                                <div class="cell">
                                    <div class="title">退款原因：</div>
                                    <div class="cnt">
                                        <a-textarea v-model="orderModalInfo.returnReason" placeholder="请填写退款原因"
                                            :auto-size="{ minRows: 3, maxRows: 5 }" />
                                    </div>
                                </div>
                                <!-- returnReason -->
                            </div>
                        </a-modal>
                    </div>
                    <div v-else>
                        <a-form-model :model="dialogForm">
                            <a-card title="订单详情">
                              <a-row>
                                  <h3>盲盒订单信息</h3>
                              </a-row>
                              <a-row :gutter="24">
                                <a-col :span="1"></a-col>
                                <a-col :span="7">
                                    <a-form-model-item label="盲盒活动号 :">
                                        <a-input :disabled="true" v-model="dialogForm.blindBoxOrderVO.blindBoxId" />
                                    </a-form-model-item>
                                  </a-col>
                                  <a-col :span="1"></a-col>
                                  <a-col :span="7">
                                    <a-form-model-item label="盲盒主订单编号 :">
                                        <a-input :disabled="true" v-model="dialogForm.blindBoxOrderVO.parentOrderNo" />
                                    </a-form-model-item>
                                  </a-col>
                                  <a-col :span="1"></a-col>
                                  <a-col :span="7">
                                    <a-form-model-item label="盲盒子订单编号 :">
                                        <a-input :disabled="true" v-model="dialogForm.blindBoxOrderVO.subOrderNo" />
                                    </a-form-model-item>
                                  </a-col>
                                </a-row>
                                <a-row :gutter="24">
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-model-item label="盲盒订单状态 :">
                                            <a-input :disabled="true"
                                                :value="getOrderStatusName(dialogForm.blindBoxOrderVO.subOrderStatus)" />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-model-item label="支付工具 :">
                                            <a-input :disabled="true" :value="dialogForm.blindBoxOrderVO.payTool" />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-model-item label="支付流水号 :">
                                            <a-input :disabled="true" :value="dialogForm.blindBoxOrderVO.tradeNo" />
                                        </a-form-model-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="24">
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-model-item label="下单时间 :">
                                            <a-input :disabled="true" v-model="dialogForm.blindBoxOrderVO.createdAt" />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-model-item label="支付时间 :">
                                            <a-input :disabled="true" v-model="dialogForm.blindBoxOrderVO.payTime" />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <!-- <a-col :span="7">
                                        <a-form-model-item label="收货时间 :">
                                            <a-input :disabled="true" v-model="dialogForm.receivingTime" />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="1"></a-col> -->
                                    <a-col :span="7">
                                        <a-form-model-item label="应付金额 :">
                                            <a-input :disabled="true" v-model="dialogForm.blindBoxOrderVO.subTradeAmt" />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-model-item label="实付金额 :">
                                            <a-input :disabled="true" v-model="dialogForm.blindBoxOrderVO.subPayAmount" />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-model-item label="渠道 :">
                                            <a-input :disabled="true" v-model="dialogForm.blindBoxOrderVO.channel" />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <!-- <a-form-model-item label="支付渠道 :">
                                            <a-input :disabled="true" v-model="dialogForm.blindBoxOrderVO.payTool" />
                                        </a-form-model-item> -->
                                    </a-col>
                                </a-row>
                                <a-row>
                                  <a-col :span="15">
                                    <h3>商品订单信息</h3>
                                  </a-col>
                                  <a-col v-if="dialogForm.couponVO.couponId" :span="8">
                                    <h3>权益金信息</h3>
                                  </a-col>
                                </a-row>
                                <a-row>
                                  <a-col :span="1"></a-col>
                                  <a-col :span="7">
                                      <a-form-model-item label="订单流水号 :">
                                          <a-input :disabled="true" v-model="dialogForm.commodityOrderVO.orderNo" />
                                      </a-form-model-item>
                                  </a-col>
                                  <a-col :span="7" class="go-goods-order" >
                                    <a-button v-if="dialogForm.commodityOrderVO.orderNo" @click="goGoodsOrder(dialogForm)" type="primary">
                                      查看此商品订单
                                    </a-button>
                                  </a-col>
                                  <a-col v-if="dialogForm.couponVO.couponId" :span="8" >
                                    <a-form-model-item  label="请求流水号 :">
                                        <a-input :disabled="true" v-model="dialogForm.couponVO.couponId" />
                                    </a-form-model-item>
                                  </a-col>
                                </a-row>
                                <a-row>
                                    <h3>商品信息</h3>
                                </a-row>
                                <template>
                                    <a-table bordered :columns="tableDetailColumns" row-key="id"
                                        :data-source="dialogForm.commodityVOs" :scroll={x:1000}>
                                        <template slot="commodityHeaderPictureUrl" slot-scope="text, record, index">
                                            <img :src="record.commodityHeaderPictureUrl" />
                                        </template>
                                    </a-table>
                                </template>

                                <a-row>
                                    <h3>买家信息</h3>
                                </a-row>
                                <a-row :gutter="24">
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-model-item label="用户姓名 :">
                                            <a-input :disabled="true" v-model="dialogForm.buyerVO.customerName" />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="1"></a-col>
                                    <a-col :span="7">
                                        <a-form-model-item label="用户ID :">
                                            <a-input :disabled="true" v-model="dialogForm.buyerVO.userId" />
                                        </a-form-model-item>
                                    </a-col>
                                    <a-col :span="7">
                                        <a-form-model-item label="用户手机号 :">
                                            <a-input :disabled="true" v-model="dialogForm.buyerVO.mobile" />
                                        </a-form-model-item>
                                    </a-col>
                                </a-row>

                                <a-row type="flex" justify="center">
                                    <a-button @click="dialogButtonClick(false)" size="large">
                                        返回
                                    </a-button>
                                </a-row>
                            </a-card>
                        </a-form-model>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Page Body -->
    </div>
    <!-- /Page Content -->
    <div th:replace="/system/resource/base/baseFoot.template"></div>

    <script
        th:src="${application.resourceUrl}+'/assets/js/datatable/jquery.dataTables.min.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/assets/js/datatable/dataTables.tableTools.min.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/assets/js/datatable/dataTables.bootstrap.min.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/bboss/js/datatable/DT_bootstrap.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/assets/js/validation/bootstrapValidator.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/assets/js/validation/bootstrapValidator_zh_CN.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/bboss/js/validator/bootstrapValidator-extend.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/bboss/js/datatable/datatable_client.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/bboss/js/datatable/datatable_server.js?'+${application.JSVERSION}"></script>
    <script th:src="${application.resourceUrl}+'/bboss/js/form/form.js?'+${application.JSVERSION}"></script>
    <script th:src="${application.resourceUrl}+'/assets/js/select2/select2.min.js?'+${application.JSVERSION}"></script>
    <script th:src="${application.resourceUrl}+'/bboss/js/select2/selectTab.js?'+${application.JSVERSION}"></script>
    <script th:src="${application.resourceUrl}+'/bboss/js/dialog/dialog-page.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/bboss/js/dialog/bboss-dialog-page.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/assets/js/jquery-file-upload/js/vendor/jquery.ui.widget.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/assets/js/jquery-file-upload/js/jquery.iframe-transport.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/assets/js/jquery-file-upload/js/jquery.fileupload.js?'+${application.JSVERSION}"></script>
    <script th:src="${application.resourceUrl}+'/assets/js/lightbox/js/lightbox.js?'+${application.JSVERSION}"></script>
    <script
        th:src="${application.resourceUrl}+'/bboss/js/upload/bboss-fileUpload.js?'+${application.JSVERSION}"></script>

    <script src="https://cdn.test.bestpay.net/orange/moment-with-locales.min.js"></script>
    <script src="https://cdn.test.bestpay.net/orange/vue.2.6.9.js"></script>
    <script src="https://cdn.test.bestpay.net/orange/antd.1.6.5.js"></script>
    <script src="https://cdn.test.bestpay.net/orange/axios.0.20.0.js"></script>
    <script src="https://cdn.test.bestpay.net/orange/antd-with-locales.1.6.5.js"></script>
    <script src="https://h5.test.bestpay.net/subapps/bboss/bboss/js/export/export-base.js?1.0.0"></script>

    <!--Page Related Scripts-->
    <script th:inline="javascript">
        function jsonSecurity (url) {
            url = url.replace(/\\/g, "@@"); //反斜杠转换为@@
            url = url.replace(/\$/g, "--"); //$符转换为--
            url = url.replace(/\|/g, "^^"); //竖杠转换为^^
            url = url.replace(/%/g, "!!");  //%转换为!!
            url = url.replace(/\"/g, "=="); //双引号转换为==
            url = url.replace(/\'/g, "**"); //单引号转换为**
            return url;
        };

        const http = axios.create({
            timeout: 5000, // 请求超时时间
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            transformRequest: [function (data) {
                let ret = ''
                for (let it in data) {
                    if (typeof data[it] === 'string') {
                        ret += encodeURIComponent(it) + '=' + jsonSecurity(data[it]) + '&'
                    } else {
                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                    }
                }
                return ret
            }],
        });

        http.interceptors.response.use(response => {
            return response.data;
        });

        function getBase64 (file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = () => resolve(reader.result);
                reader.onerror = error => reject(error);
            });
        }
        const { locales } = window.antd;

        function getOrderStatus (text, row, index) {
          return subOrderStatusNum[subOrderStatusObj[row.subOrderStatus]] 
            
        }
        // tableDetailColumns
        const tableDetailColumnsTemplate = [
            {
                title: '商品图片',
                key: 'commodityHeaderPictureUrl',
                scopedSlots: { customRender: 'commodityHeaderPictureUrl' },
                align: 'center',
                width: 120,
            },
            {
                title: '商品',
                dataIndex: 'commodityMainTitle',
                align: 'center',
                width: 150,
            },
            {
                title: '商品编码',
                dataIndex: 'spuId',
                align: 'center',
                width: 120,
            },
            {
                title: '商品属性',
                dataIndex: 'commodityAttribute',
                align: 'center',
                width: 120,
            },
            {
                title: '商品数量',
                dataIndex: 'commodityNumber',
                align: 'center',
                width: 150,
            },
            {
                title: '回收折扣',
                dataIndex: 'returnRatio',
                align: 'center',
                width: 150,
            },
            //      {
            //        title: '支付金额',
            //        dataIndex: 'payAmount',
            //       align: 'center',
            //       width: 150,
            //      },
        ]
        /** 表格数据列配置 */
        const tableColumns = [
            {
                title: '盲盒活动号',
                dataIndex: 'blindBoxId',
                align: 'center',
                width:  document.body.clientWidth * 0.1,
            },
            {
                title: '盲盒子订单状态',
                dataIndex: 'subOrderStatus',
                align: 'center',
                width:  document.body.clientWidth * 0.12,
                customRender: getOrderStatus,
            },{
                title: '盲盒子订单号',
                dataIndex: 'subOrderNo',
                align: 'center',
                width:  document.body.clientWidth * 0.12,
                // customRender: getOrderStatus,
            },
            {
                title: '商品主标题',
                dataIndex: 'commodityMainTitle',
                align: 'center',
                width:  document.body.clientWidth * 0.16,
            },
            {
                title: '商品属性值',
                dataIndex: 'commodityAttribute',
                align: 'center',
                width:  document.body.clientWidth * 0.15,
            },
            // {
            //     title: '商品订单状态',
            //     dataIndex: 'orderStatus',
            //     align: 'center',
            //     width: 100,
            // },
            {
                title: '渠道',
                dataIndex: 'channel',
                align: 'center',
                width:  document.body.clientWidth * 0.1,
                // customRender: getOrderStatus,
            },
            {
                title: '支付金额',
                dataIndex: 'payAmount',
                align: 'center',
                width:  document.body.clientWidth * 0.1,
            },
            {
                title: '支付时间',
                dataIndex: 'payTime',
                align: 'center',
                width:  document.body.clientWidth * 0.12,
            },
            {
                title: '操作',
                align: 'center',
                dataIndex: 'action',
                fixed: 'right',
                width:  200,
                scopedSlots: { customRender: 'action' },
            }
        ]

        const EditableCell = {
            template: `
          <div class="editable-cell">
            <div v-if="editable" class="flex justify-center items-center">
              <a-input :value="value" @change="handleChange" @pressEnter="check" />
              <a-icon type="check" class="ml-2" @click="check" />
            </div>
            <div v-else class="relative flex justify-center items-center px-8">
              {{ value || ' ' }}
              <a-icon v-if="!disableEdit" type="edit" class="absolute right-1 top-1/4" @click="edit" />
            </div>
          </div>
        `,
            props: {
                text: String,
                disableEdit: Boolean,
            },
            data () {
                return {
                    value: this.text,
                    editable: false,
                };
            },
            methods: {
                handleChange (e) {
                    const value = e.target.value;
                    this.value = value;
                },
                check () {
                    this.editable = false;
                    this.$emit('change', this.value);
                },
                edit () {
                    this.editable = true;
                },
            },

        };
        // init(0, "初始化"),
        // waitPayment(1, "待支付"),
        // canceled(2, "已取消"),
        // paySucceed(3, "支付成功"),
        // finishPayment(4, "待确认"),
        // finishConfirm(5, "已确认"),
        // waitDeliverGoods(6, "待发货"),
        // finishDeliverGoods(7, "已发货/待收货"),
        // finishRecycle(8, "已回收"),
        // recycleRefunding(9, "回收退款中"),
        // breakAContractRefunding(10, "违约退款中"),
        // finishTakeDeliveryOfGoods(11, "交易成功/已收货"),
        // breakAContract(12, "订单关闭/已违约"),
        const subOrderStatusNum = {
          0 :"初始化",
          1 :"待支付",
          2 :"已取消",
          3 :"支付成功",
          4 :"待确认",
          5 :"已确认",
          6 :"待发货",
          7 :"已发货/待收货",
          8 :"已回收",
          9 :"回收退款中",
          10 :"违约退款中",
          11 :"交易成功/已收货",
          12 :"订单关闭/已违约",
        }
        // 盲盒子订单枚举值
        const subOrderStatusObj ={
          // init(0, "初始化"),
          init: 0,
          // waitPayment(1, "待支付"),
          waitPayment: 1,
          // canceled(2, "已取消"),
          canceled: 2,
        // paySucceed(3, "支付成功"),
          paySucceed: 3,
          // finishPayment(4, "待确认"),
          finishPayment: 4,
          // finishConfirm(5, "已确认"),
          finishConfirm: 5,
          // waitDeliverGoods(6, "待发货"),
          waitDeliverGoods: 6,
          // finishDeliverGoods(7, "已发货/待收货"),
          finishDeliverGoods: 7,
          // finishRecycle(8, "已回收"),
          finishRecycle: 8,
          // recycleRefunding(9, "回收退款中"),
          recycleRefunding: 9,
          // breakAContractRefunding(10, "违约退款中"),
          breakAContractRefunding: 10,
          // finishTakeDeliveryOfGoods(11, "交易成功/已收货"),
          finishTakeDeliveryOfGoods: 11,
          // breakAContract(12, "订单关闭/已违约"),
          breakAContract: 12
        }
        moment.locale('zh-cn');
        var vm = new Vue({
            el: '#app',
            components: {
                EditableCell,
            },
            data: {
                tableDetailColumns: [] ,
                tableScroll :{x:document.body.clientWidth * 0.8 },
                queryTableLoading: false,
                /** 展示 table 页面 */
                showTablePage: true,
                // table 数据
                /** 搜索栏样式配置 */
                layout: {
                    labelCol: { span: 7 },
                    wrapperCol: { span: 17 },
                },
                /** 搜索栏数据 */
                form: {},

                /** 渠道枚举 */
                channelList: [
                    {
                        label: '翼支付',
                        value: 'bestpay',
                    },
                    {
                        label: 'QQ',
                        value: 'qq',
                    },
                    {
                        label: '白条任务制',
                        value: 'lingjinbaitiao',
                    },
                    {
                        label: '借钱任务制',
                        value: 'lingjinjieqian',
                    },
                ],
                // 子订单状态枚举
                subOrderStatusEnum: [
                  {
                        label: '待支付',
                        value: 1,
                        type: 'init'
                    },
                  {
                        label: '已取消',
                        value: 2,
                        type: 'waitPayment'
                    },
                    // paySucceed(3, "支付成功"),  
                    {
                        label: '支付成功',
                        value: 3,
                        type: 'paySucceed'
                    },
                  {
                        label: '待确认',
                        value: 4,
                        type: 'finishPayment'
                    },
                  {
                        label: '已确认',
                        value: 5,
                        type: 'finishConfirm'
                    },
                  {
                        label: '待发货',
                        value: 6,
                        type: 'waitDeliverGoods'
                    },
                  {
                        label: '待收货',
                        value: 7,
                        type: 'finishDeliverGoods'
                    },
                  {
                        label: '已回收',
                        value: 8,
                        type: 'finishRecycle'
                    },
                  {
                        label: '回收退款中',
                        value: 9,
                        type: 'recycleRefunding'
                    },
                  {
                        label: '违约退款中',
                        value: 10,
                        type: 'breakAContractRefunding'
                    },
                  {
                        label: '交易成功/已收货',
                        value: 11,
                        type: 'finishTakeDeliveryOfGoods'
                    },
                  {
                        label: '订单关闭/已违约',
                        value: 12,
                        type: 'breakAContract'
                    },
                ],
                 payTypeOptions: [
                    {
                        label: '未知',
                        value: 0,
                    },
                    {
                        label: '账户余额（可提现）',
                        value: 1,
                    },
                    {
                        label: '账户余额（不可提现）',
                        value: 2,
                    },
                    {
                        label: '快捷卡（借记）',
                        value: 3,
                    },
                ],
                /** 分页器 */
                pagination: {
                    showSizeChanger: true,
                    showQuickJumper: true,
                    total: null,
                    pageSize: 10,
                    current: 1,
                    showTotal: (total, range) => `共${total}条`,
                    pageSizeOptions: ['10', '25', '50', '100'],
                    buildOptionText: (size) => {
                        return `${size.value}条/页`
                    }
                },
                /** 表格分页数据查询中标识位 */
                loading: false,
                /** 表格数据 */
                tableData: [],

                dialogForm: {
                },
                closeOrderModalVisible: false,
                orderModalInfo: {}
            },
            mounted: function () {
              
                this.queryTableData();
            },
            methods: {
                goGoodsOrder(options){
                  console.log("options" , options)
                  const spuId = options.commodityVOs.spuId
                  const orderNo = options.commodityOrderVO.orderNo
                  location.href = location.origin + '/PF/page/mallOrderService/queryPage.html?spuId='+spuId+'&orderNo='+orderNo
                },
                /** 打开关闭订单提示弹层 */
                showCloseOrderModal (options) {
                    // 待发货  已发货 已收货 退款中  可以发起关单申请
                    console.log(options)
                    if (options.orderStatusInt == 3 || options.orderStatusInt == 4 || options.orderStatusInt == 5 || options.orderStatusInt == 9) {

                        this.closeOrderModalVisible = true
                        this.orderModalInfo = options
                    } else {
                        this.$message.error('该订单无法发起关单');

                    }
                },
                /** 确认关闭订单 */
                async handleCloseOrderOk () {
                    if (!this.orderModalInfo.returnReason) {
                        this.$message.error('请填写退款原因！');
                        return
                    }
                    this.closeOrderModalVisible = false
                    const url = '/PF/service/mallOrderService/mallOrderClose.do';
                    const { success, result, errorMsg } = await http.post(url, {
                        orderNo: this.orderModalInfo.orderNo,
                        returnReason: this.orderModalInfo.returnReason
                    });
                    console.log("关单请求返回", result)
                    if (!success) {
                        this.$message.error(errorMsg);
                        return;
                    }
                    this.$message.success('关单成功');
                    this.queryTableData()
                },
                /** 配置窗口按钮点击 */
                async dialogButtonClick (flag) {
                    // 取消按钮直接重新展示table
                    if (!flag) {
                        this.showTablePage = true;
                        return;
                    }
                },
                onQueryTableData(){
                  this.pagination.current = 1
                  this.queryTableData()
                },
                /** 查询表格数据 */
                async queryTableData () {
                    console.log('查询表格数据');
                    // 组装表格查询参数
                    const searchTableDataParams = {
                        ...this.form,
                        size: this.pagination.pageSize,
                        current: this.pagination.current,
                        mobile: this.form.mobile,
                        // payTimes: (this.form.payTimes && this.form.payTimes) && moment(this.form.payTimes).format('YYYY-MM-DD HH:mm:ss')
                        payTimeStart: (this.form.payTimes && this.form.payTimes[0]) && moment(this.form.payTimes[0]).format('YYYY-MM-DD') + " 00:00:00",
                        payTimeEnd: (this.form.payTimes && this.form.payTimes[1]) && moment(this.form.payTimes[1]).format('YYYY-MM-DD') + " 23:59:59",
                    }
                    // delete searchTableDataParams.mobile;
                    for (let key in searchTableDataParams) {
                        if (!searchTableDataParams[key]) {
                            delete searchTableDataParams[key]
                        }
                    }
                    console.log('表格查询参数', searchTableDataParams);
                    // 数据查询
                    const url = '/PF/service/excellentBlindBoxOrderService/blindBoxOrderQuery.do';
                    this.queryTableLoading = true
                    const { success, result, errorMsg } = await http.post(url, searchTableDataParams);
                    this.queryTableLoading = false
                    console.log(result, '查询表格数据');
                    if (!success) {
                        this.$message.error(errorMsg);
                        return;
                    }
                    for (let i = 0; i < result.records.length; i++) {
                        result.records[i].payAmount = result.records[i].payAmount / 100;
                    }
                    this.pagination.total = result.total,

                        this.tableData = result.records;
                },
                // 导出
                onExport () {
                  // /PF/service/excellentBlindBoxOrderService/blindBoxOrderExport.do
                    const exportParams = [
                        {
                            "name": "targetFunctionId",
                            "value": "PF#service#excellentBlindBoxOrderService#blindBoxOrderExport#do",
                        },
                        {
                            "name": "fileCode",
                            "value": "blindBoxOrderRecordExport",
                        },
                    ];
                    if (this.form.payTimes && this.form.payTimes[0]) {
                        $('#hiddenForm-startTime').val(moment(this.form.payTimes[0]).format('YYYY-MM-DD HH:mm:ss'))
                    }
                    if (this.form.payTimes && this.form.payTimes[1]) {
                        $('#hiddenForm-endTime').val(moment(this.form.payTimes[1]).format('YYYY-MM-DD HH:mm:ss'))
                    }
                    const exportObj = new $.bboss.export.init(
                        'export',
                        'query-form',
                        'dataList',
                        'template-blindBoxOrderRecordExport.xlsx',
                        '盲盒订单记录.xls',
                        2000,
                        2000,
                        window,
                        WWWROOT + "/PF/resource/excellentBlindBoxOrderService/export.download",
                        null,
                        exportParams,
                    );
                    exportObj.initForm();
                    exportObj.startExport();
                },
                /** 重置搜索查询条件 */
                resetSearchFormInfo () {
                    this.form = {};
                    console.log('重置搜索查询条件');
                },
                /** 分页器事件处理 */
                handleTableChange (pagination) {
                    // 设置分页器数据
                    this.$set(this, 'pagination', pagination);
                    // 查询 table 数据
                    this.queryTableData();
                },
                /** 展示详情弹窗 */
                async showDetailDialog (record) {

                    // 通过接口查询已配置商品信息
                    const url = '/PF/service/excellentBlindBoxOrderService/blindBoxOrderDetailQuery.do';
                    const params = {
                      subOrderNo: record.subOrderNo,
                    };
                    console.log(params, '查询已配置商品信息参数');
                    const { success, result, errorMsg } = await http.post(url, params);
                    console.log(result, '查询已配置商品信息');
                    if (!success) {
                        this.$message.error(errorMsg);
                        return;
                    
                    };
                    this.dialogForm = result;
                    this.dialogForm.blindBoxOrderVO =  this.dialogForm.blindBoxOrderVO || {}
                    this.dialogForm.commodityVOs =  this.dialogForm.commodityVOs || []
                    this.dialogForm.receivingVO =  this.dialogForm.receivingVO || {}
                    this.dialogForm.buyerVO =  this.dialogForm.buyerVO || {}
                    this.dialogForm.merchantVO =  this.dialogForm.merchantVO || {}
                    this.dialogForm.expressVO =  this.dialogForm.expressVO || {}
                    this.dialogForm.couponVO =  this.dialogForm.couponVO || {}
                    this.tableDetailColumns = JSON.parse(JSON.stringify(tableDetailColumnsTemplate))
                  
                    if(this.dialogForm.blindBoxOrderVO.subTradeAmt){
                      this.dialogForm.blindBoxOrderVO.subTradeAmt = (this.dialogForm.blindBoxOrderVO.subTradeAmt/100).toFixed(2)
                    }
                    if(this.dialogForm.blindBoxOrderVO.subPayAmount){
                      this.dialogForm.blindBoxOrderVO.subPayAmount = (this.dialogForm.blindBoxOrderVO.subPayAmount/100).toFixed(2)
                    }
                    // 清空一下搜索条件，方便新增或修改后再次查询内容
                    this.resetSearchFormInfo();
                    this.showTablePage = false;
                },
                getOrderStatusName (value) {
                    return (this.subOrderStatusEnum.find(item => item.type === value) && this.subOrderStatusEnum.find(item => item.type === value).label) || '';
                },
                getPayTypeName (value) {
                    return (this.payTypeOptions.find(item => item.value === value) && this.payTypeOptions.find(item => item.value === value).label) || '';
                },
            },
        });
    </script>
</body>
<!--  /Body -->

</html>